<template>
  <div class="dialogContainer" v-drag>
    <div class="title drag-handle">
      <div class="bar"></div>
      <div class="title-text">审核状态</div>
      <div class="title-right">
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div class="content">
      <div class="selectPanel">
        <div class="selectItem">
          <span>日期：</span>
          <el-date-picker
            style="width: 30%; margin: 0 0.5rem"
            v-model="startTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
          <span>至</span>
          <el-date-picker
            style="width: 30%; margin: 0 0.5rem"
            v-model="endTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </div>
        <div class="selectItem">
          <span>上报类型</span>
          <select name="" id="" v-model="uploadType">
            <option value="全部">全部</option>
          <option value="属性纠错">属性纠错</option>
          </select>
          
          <div class="btnGroup">
            <button @click="searchList">查询</button>
            <button @click="resetList">重置</button>
          </div>
        </div>
      </div>
      <div class="tableContainer">
        <table
          id="tableHead"
          cellspacing="0"
          cellpadding="1"
          style="text-align: center"
        >
          <thead>
            <tr>
              <td>序号</td>
              <td>上报类型</td>
              <td>上报时间</td>
              <td>上报人</td>
              <td>状态</td>
              <td>操作</td>
            </tr>
          </thead>
        </table>
        <div class="tbodyContainer">
          <span v-if="tableData.length <= 0">暂无数据</span>
          <table
            id="tableBody"
            cellspacing="0"
            cellpadding="1"
            style="text-align: center"
          >
            <tbody>
              <tr v-for="(item, index) in tableData">
                <td>{{ index + 1 }}</td>
                <td>{{ item.type }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.uploader }}</td>
                <td
                  :style="{
                    color:
                      item.status == '待审核'
                        ? 'blue'
                        : item.status == '审核通过'
                        ? 'green'
                        : 'red',
                  }"
                >
                  {{ item.status }}
                </td>
                <td>
                  <div class="dataBtnGroup">
                    <button @click="getDetailLayeritem(item)">地图</button>
                    <button @click="datailDialogShow(item)">详情</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="detailDialog" v-show="dialogShow" v-drag>
      <div class="dialogTitle drag-handle">
        <span>详情</span>
        <div class="title-right">
          <div tabindex="0" class="icon" @click="dialogShow = false">×</div>
        </div>
      </div>
      <div class="dialogContent">
        <div class="attribue" v-if="dialogData.type == '属性纠错'">
          <div class="item">
            <span>上报类型：</span>
            <input type="text" v-model="dialogData.type" readonly="true" />
          </div>
          <div class="item">
            <span>上报时间：</span>
            <input type="text" v-model="dialogData.time" readonly="true" />
          </div>
          <div class="item">
            <span>纠错对象：</span>
            <input
              type="text"
              v-model="dialogData.data.adviceObjValue"
              readonly="true"
            />
          </div>
          <div class="item">
            <span>纠错内容：</span>
            <input
              type="text"
              v-model="dialogData.data.adviceContentValue"
              readonly="true"
            />
          </div>
          <div class="item">
            <span>备注：</span>
            <input
              type="text"
              v-model="dialogData.data.adviceFeedbackRemark"
              readonly="true"
            />
          </div>
          <div class="item">
            <span>区域标注：</span>
            <textarea
              type="text"
              v-model="dialogData.data.feedbackArea"
              readonly="true"
              rows="4"
            >
            </textarea>
          </div>
          <div class="item">
            <span>标注点：</span>
            <span
              >X:{{ dialogData.data.feedbackPointerX }} <br />Y:{{
                dialogData.data.feedbackPointerY
              }}</span
            >
          </div>
        </div>
        <div class="layer" v-if="dialogData.type == '专题图'"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  approveFeedback,
  rejectFeedback,
  listPendingFeedback,
} from "@/api/EquipmentManagement.js";
export default {
  name: "userReport",
  data() {
    return {
      uploadType:"全部",
      startTime: "",
      map: "",
      endTime: "",
      tableData: [],
      dialogShow: false,
      polygonLayer: "",
      pointLayer: "",
      dialogData: {
        data: {},
      },
    };
  },
  mounted() {
    //属性纠错
    this.searchList();
    this.map = this.$store.getters.Map;
    this.polygonLayer = this.map.layer.createVectorLayer("polygonLayer");
    this.pointLayer = this.map.layer.createVectorLayer("pointLayer");
  },
  beforeDestroy() {
    if (this.map) {
      this.pointLayer.getSource().clear();
      this.polygonLayer.getSource().clear();

      this.map.map.removeLayer(this.pointLayer);
      this.map.map.removeLayer(this.polygonLayer);
    }
  },
  methods: {
    resetList(){
      this.pointLayer.getSource().clear();
      this.polygonLayer.getSource().clear();
      this.uploadType="";
    },
    getDetailLayeritem(item) {
      this.pointLayer.getSource().clear();
      this.polygonLayer.getSource().clear();
      if (item.type == "属性纠错") {
        let featureData = item.data;
        if (featureData.feedbackPointerX && featureData.feedbackPointerY) {
          this.map.marker.addMarker(
            featureData.feedbackPointerX,
            featureData.feedbackPointerY,
            this.pointLayer,
            {
              scale: 0.5, //大小
              radius: 5,
              pBorderColor: "#000000",
              pBorderWidth: 1,
              pFillColor: "red",
            },
            featureData
          );
        }
        if (featureData.feedbackArea) {
          let posData = JSON.parse(featureData.feedbackArea);
          this.map.layer.addPolygonsToLayer(this.polygonLayer, posData, {
            fill: "rgba(255, 255, 255, 0.5)",
            strokeColor: "#000",
            strokeWidth: 2,
          });
        }
      }
    },
    datailDialogShow(item) {
      this.dialogShow = true;
      this.dialogData = item;
    },
    searchList() {
      listPendingFeedback({
        username: JSON.parse(localStorage.getItem("userInfo")).username,
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.map((item) => {
          return {
            id: item.adviceFeedbackId,
            type: "属性纠错",
            time: item.updateTime,
            status: item.reviewStatus,
            uploader: item.reportPerson,
            data: item,
          };
        });
      });
    },
    passItem(item) {
      console.log(item);
      approveFeedback({ feedbackId: item.id }).then((res) => {
        this.$message({
          type: "success",
          message: "审核已通过！",
        });
        this.searchList();
      });
    },
    rejectItem(item) {
      console.log(item);
      rejectFeedback({ feedbackId: item.id }).then((res) => {
        console.log(res);
        this.$message({
          type: "success",
          message: "审核已拒绝！",
        });
        this.searchList();
      });
    },
    closeDialog() {
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.detailDialog {
  position: absolute;
  width: 16vw;
  height: 35vh;
  top: 20rem;
  background: #285383;
  left: -22rem;
  .dialogTitle {
    display: flex;
    justify-content: space-between;
  }
}
.dialogContent {
  .item {
    display: flex;
    margin: 0.5rem 0.5rem;
  }
}
.dialogContainer {
  width: 575px;
  height: 640px;
  position: absolute;
  background-color: #285383;
  left: 57vw;
  .title {
    height: 5%;
    display: flex;
    align-items: center;
    .title-text {
      font-size: 1rem;
    }
    .bar {
      width: 5px;
      height: 20px;
      background-color: white;
      margin: 10px;
    }
    .icon {
      position: absolute;
      top: 2px;
      right: 30px;
      font-size: 25px;

      margin-left: 5px;
    }
  }
  .content {
    height: 95%;
    overflow: hidden;
    .selectPanel {
      height: 15%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .selectItem {
        margin: 0.5rem;
        width: 100%;
        display: flex;
        ::v-deep {
          .el-input,
          .el-input__inner {
            width: 9vw;
            border-radius: 2px;
          }
          .el-input__inner {
            height: 2.5vh;
          }
        }
        ::v-deep .el-input__icon {
          line-height: 2.5vh;
        }
        select {
          height: 2.5vh;
          width: 30%;
          border-radius: 2px;
          outline: none;
        }
      }
      .btnGroup {
        margin-left: 1rem;
        button {
          margin: 0 1rem;
          width: 4rem;
        }
      }
    }
    .tableContainer {
      border-collapse: collapse;
      display: flex;
      flex-direction: column;
      align-items: center;
      table {
        width: 98%;
        border-color: gray;
        thead {
          height: 3rem;
          font-size: 0.9rem;
          position: sticky;
          top: 0; /* 将表头固定在顶部 */
          z-index: 1; /* 确保表头位于内容之上 */
          background-color: white; /* 可选：设置表头背景颜色以区分 */
          td {
            background-color: #f5f7f9;
            color: #b4b6b8;
            font-weight: 700;
          }
        }
        tbody {
          td {
            // border: 1px solid gray;
            border: 1px solid rgb(161, 161, 161);
            height: 2rem;
            text-align: center;
            color: #000;
            background-color: #fff;
          }
        }
      }
      .tbodyContainer {
        width: 98%;
        height: 460px;
        overflow-y: scroll;
        background: #fff;
        span {
          color: #b4b6b8;
        }
        table {
          width: 100%;
          tr:hover {
            td {
              background-color: #c1c1c1;
            }
          }
        }
        .dataBtnGroup {
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
      tr {
        td:nth-child(1) {
          width: 10%;
        }
        td:nth-child(2) {
          width: 20%;
        }
        td:nth-child(3) {
          width: 20%;
        }
        td:nth-child(4) {
          width: 10%;
        }
        td:nth-child(5) {
          width: 20%;
        }
        td:nth-child(5) {
          width: 20%;
        }
      }
    }
  }
}
</style>
